<script>
// 时间戳转换
import { changeSeconds } from '@/utils/figure';
import mixin from '@/mixins/mixin';
// 监听DOM是否加载完毕
// import { mutationObserve } from '@/utils/MutationObserver';

export default {
  name: 'InfoList',

  mixins: [mixin],

  components: {
    
  },
  
  props: {
    infoList: {
      type: Array,
      default() {
        return []
      }
    }
  },

  data() {
    return {
  
    };
  },

  mounted() {
    console.log(this.infoList);
  },

  methods: {
    goDetail(event) {
      const { ids, ida, idp, mid } = event.target.dataset;
      if (ids) {
        this.$router.push({
          name: 'artistdetail',
          query: {
            id: ids
          }
        })
      } else if (ida) {
        this.$router.push({
          name: 'albumdetail',
          query: {
            id: ida
          }
        })
      } else if (mid) {
        this.$router.push({
          name: 'videodetail',
          query: {
            mid
          }
        })
      } else {
        if (idp) {
          const current = this.infoList.find(item => item.id == idp);
          this.$store.commit('main/ISPLAYED', true);
          this.$store.commit('detail/AUDIOID', current);
          // 和其他不同,最新音乐里只存当前点击播放的歌曲
          this.$store.commit('detail/ADDAUDIOLIST', current);
        }
      }
    }
  },

  render(h) {
    // 创建li节点
    let lis = this.infoList.map((item, index) => {
      // li节点下的每个index节点
      let itemIndex = h('div', {
        staticClass: 'item-index',
        domProps: {
          innerHTML: index + 1
        }
      });

      // li节点下面的img标签
      let itemImg = h('img', {
        attrs: {
          alt: item.album.name,
          'data-idp': item.id
        },
        directives: [
          {
            name: "lazy",
            rawName: "v-lazy",
            value: `${item.album.blurPicUrl}?param=100y100`,
            expression: "item.album.blurPicUrl",
          },
        ],
      });

      // li节点下面的歌曲名
      // 是否渲染歌曲后缀名
      const alias = item.album.alias;
      const album = item.name;
      const myTitle = alias && alias[0] ? `${album}(${alias[0]})` : album;
      // let span = ;
      let itemSongName = h('div', {
        staticClass: 'song-name mleft-10 text-hidden',
        attrs: {
          title: myTitle,
          'data-idp': item.id
        }
      }, [
        h('div', {
          staticClass: 'text-hidden',
          domProps: {
            innerHTML: myTitle
          }
        }),
        h('div', null, [
          h('div', {
            staticClass: 'tag mleft-5',
            domProps: {
              innerHTML: 'SQ'
            },
            directives: [
              {
                name: "show",
                rawName: "v-show",
                value: item.privilege.maxbr > 320000,
                expression: "item.mvid",
              }
            ]
          }),
          h('div', {
            staticClass: 'tag tag-mv mleft-5',
            domProps: {
              innerHTML: 'MV'
            },
            directives: [
              {
                name: "show",
                rawName: "v-show",
                value: item.mvid,
                expression: "item.mvid",
              }
            ],
            attrs: {
              'data-mid': item.mvid
            }
          }, [ h('a-icon', {
            props: { type: 'caret-right' }
          }) ]),
          // h('div', {
          //   staticClass: 'tag tag-vip mleft-5',
          //   domProps: {
          //     innerHTML: 'VIP'
          //   }
          // }),
          // h('div', {
          //   staticClass: 'tag mleft-5',
          //   domProps: {
          //     innerHTML: '试听'
          //   }
          // })
        ])
      ]);

      // li节点下的歌手们
      let singerSpan = [];
      item.album.artists.forEach(artist => {
        singerSpan.push(
          h('span', {
            domProps: {
              innerHTML: artist.name
            },
            attrs: {
              'data-ids': artist.id
            },
            staticClass: 'pointer'
          })
        );
      })
      let itemSinger = h('div', {
        staticClass: 'singer-name mleft-10 font-12 text-hidden',
      }, [...singerSpan])

      // li节点下面的专辑名称
      let itemAlbum = h('div', {
        staticClass: 'album mleft-10 font-12 text-hidden',
        attrs: {
          title: item.album.name,
          'data-ida': item.album.id
        },
        domProps: {
          innerHTML: item.album.name
        }
      })

      // li节点下面的歌曲时长
      let itemTime = h('div', {
        staticClass: 'time mleft-10 font-12',
        domProps: {
          innerHTML: changeSeconds(item.duration)
        }
      });
      return h('li', {
        staticClass: 'info-item'
      }, [itemIndex, itemImg, itemSongName, itemSinger, itemAlbum, itemTime])
    });

    return h('div', {
      attrs: {
        id: 'info-list'
      }
    }, [
      h('ul', {
        staticClass: 'info',
        on: {
          click: this.goDetail
        }
      }, [lis])
    ]);
  }
};
</script>

<style lang="less" scoped>
#info-list {
  .info-item {
    display: flex;
    height: 90px;
    align-items: center;
    &:nth-child(2n) {
      background-color: #f9f9f9;
    }
    &:hover {
      background-color: #f0f1f2;
    }
    .item-index {
      width: 60px;
      text-align: center;
    }
    img {
      width: 60px;
      height: 60px;
      border-radius: 4px;
      border: 1px solid #e6e6e6;
    }
    .song-name {
      display: flex;
      align-items: center;
      flex: 1;
    }
    .album, .singer-name {
      width: 150px;
      color: #676767;
      >span::after {
        display: inline-block;
        content: ' /';
      }
      >span:last-child::after {
        display: none;
      }
    }
    .time {
      width: 100px;
      color: #c3c3c4;
    }
  }
}
</style>